<style lang="scss" scoped>
	.container {
		padding: 50rpx 30rpx;
		width: 100vw;

		.user {
			width: 100%;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			height: 380rpx;

			.head {
				width: 150rpx;
				height: 150rpx;
				border-radius: 50%;
				box-shadow: 0 20rpx 20rpx rgba(0, 0, 0, 0.1);
			}

			.ip {
				padding: 20rpx 0 10rpx;
				font-size: 44rpx;
				color: #333;
			}

			.address {
				color: #666;
				font-size: 28rpx;
			}
		}

		.section {
			width: 100%;
			box-shadow: 0 10rpx 20rpx rgba(0, 0, 0, 0.05);
			border: 1px solid rgba(0, 0, 0, 0.05);
			border-radius: 10rpx;
			margin-bottom: 50rpx;

			.list {
				width: 100%;
				display: flex;
				position: relative;
				justify-content: space-between;
				align-items: center;
				border-bottom: 1px solid rgba(0, 0, 0, 0.05);

				&:last-child {
					border-bottom: none;
				}

				.left,
				.right {
					display: flex;
					justify-content: center;
					align-items: center;
					padding: 30rpx 20rpx;

					.text {
						margin-left: 15rpx;
						color: #666;
					}
				}

				.right {

					.text {
						margin-right: 10rpx;
						color: #AAA;
						font-size: 28rpx;
					}
				}

				button {
					position: absolute;
					left: 0;
					top: 0;
					width: 100%;
					height: 100%;
					opacity: 0;
				}
			}

		}
	}
</style>

<template>
	<view class="container pageBg">
		<view class="user">
			<image class="head" src="../../static/images/logo.png" mode="aspectFill"></image>
			<view class="ip">
				100.100.100.1
			</view>
			<view class="address">
				广东
			</view>
		</view>
		<view class="section">
			<view class="list">
				<view class="left">
					<uni-icons type='download-filled' color='#23B68E' size="22"></uni-icons>
					<view class="text">
						我的下载
					</view>
				</view>
				<view class="right">
					<view class="text">
						15
					</view>
					<uni-icons type='right' color="#aaa"></uni-icons>
				</view>
			</view>
			<view class="list">
				<view class="left">
					<uni-icons type='star-filled' color='#23B68E' size="22"></uni-icons>
					<view class="text">
						我的评分
					</view>
				</view>
				<view class="right">
					<view class="text">
						15
					</view>
					<uni-icons type='right' color="#aaa"></uni-icons>
				</view>
			</view>
			<view class="list">
				<view class="left">
					<uni-icons type='chatboxes-filled' color='#23B68E' size="22"></uni-icons>
					<view class="text">
						联系客服
					</view>
					<!-- #ifdef MP -->
					<button open-type="contact">联系客服</button>
					<!-- #endif -->
					<!-- #ifndef MP -->
					<button @click="callSustomerService">拨打电话</button>
					<!-- #endif -->
				</view>
				<view class="right">
					<view class="text">
						15
					</view>
					<uni-icons type='right' color="#aaa"></uni-icons>
				</view>
			</view>
		</view>
		<view class="section">
			<view class="list">
				<view class="left">
					<uni-icons type='download-filled' color='#23B68E' size="22"></uni-icons>
					<view class="text">
						订阅更新
					</view>
				</view>
				<view class="right">
					<view class="text">
						15
					</view>
					<uni-icons type='right' color="#aaa"></uni-icons>
				</view>
			</view>
			<view class="list">
				<view class="left">
					<uni-icons type='notification-filled' color='#23B68E' size="22"></uni-icons>
					<view class="text">
						常见问题
					</view>
				</view>
				<view class="right">
					<view class="text">
						15
					</view>
					<uni-icons type='right' color="#aaa"></uni-icons>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue'
	const callSustomerService=()=>{
		console.log('callSustomerService');
	}
</script>